<template>
  <div class="wrapper" v-loading="loading">
    <div class="applicationList">
      <div class="left">
        <div class="title">
          <span class="sub-title">客户单位</span>
        </div>
        <el-scrollbar class="scroll">
          <div
            :class="[
              'item',
              'left-item',
              index == currentAppIndex ? 'active' : '',
            ]"
            v-for="(item, index) in appList"
            :key="index"
            @click="handleClickApp(item, index)"
          >
            <span class="text">{{ item.appName }}</span>
          </div>
        </el-scrollbar>
      </div>
      <div class="middle">
        <div class="title">
          <span class="sub-title">项目名称</span>
        </div>
        <el-scrollbar class="scroll">
          <div
            :class="[
              'item',
              'spe-item',
              index == currentProjectIndex ? 'active left-active' : '',
            ]"
            v-for="(item, index) in currentProjectList"
            :key="index"
            @click="handleClickPro(item, index)"
          >
            <span class="text">{{ item.cardName }}</span>
          </div>
        </el-scrollbar>
      </div>
      <div class="right">
        <div class="title">
          <span class="sub-title">权益列表</span>
        </div>
        <el-scrollbar class="scroll">
          <el-checkbox-group v-if="showCheckBox" v-model="activeRightList">
            <el-checkbox
              v-for="(item, index) in allRightsList"
              :label="item.rightId"
              :key="index"
              >{{ item.rightName }}</el-checkbox
            >
          </el-checkbox-group>
          <div v-else>
            <div
              class="right-item"
              v-for="(item, index) in currentRightList"
              :key="index"
            >
              <span class="text">{{ item.rightName }}</span>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleClickSave">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { applicationList, rightsList } from "@/api/index";

export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      showCheckBox: false,
      appList: [],
      currentProjectList: [],
      currentRightList: [],
      allRightsList: [],
      activeRightList: [],
      currentAppIndex: 0,
      currentProjectIndex: 0,
      currentSelectApp: null,
      addNewApplicationVisible: false,
      addNewProjectVisible: false,
      currentSelectPro: null,
    };
  },
  computed: {},
  watch: {
    visible(val) {
      if (val) {
        this.getData();
      }
    },
  },
  created() {},
  methods: {
    handleClose() {
      this.$emit("update:visible", false);
    },
    handleClickSave() {
      if (this.currentSelectPro.cardVersion == "1") {
        this.$message.error("此为职途v1.0版本的项目，不允许申请");
        return;
      }
      this.$emit("confirm", this.currentSelectApp, this.currentSelectPro);
    },
    handleClickApp(item, index) {
      if (index == this.currentAppIndex) return;
      this.currentSelectApp = item;
      this.showCheckBox = false;
      this.currentAppIndex = index;
      this.currentProjectList = item.cardTypeList || [];
      this.currentProjectIndex = 0;
      this.currentSelectPro =
        Array.isArray(item.cardTypeList) && item.cardTypeList.length
          ? item.cardTypeList[0]
          : null;
      this.currentRightList = this.currentProjectList.length
        ? this.currentProjectList[0].rightList
        : [];
    },
    handleClickPro(item, index) {
      if (item.cardVersion == "1") {
        this.$message.error("此为职途v1.0版本的项目，不允许申请");
        return;
      }
      if (index == this.currentProjectIndex) return;
      this.currentSelectPro = item;
      this.showCheckBox = false;
      this.currentProjectIndex = index;
      this.currentRightList = item.rightList;
    },
    async getData() {
      await this.rightsListFn();
      this.applicationListFn();
    },
    applicationListFn() {
      applicationList()
        .then((res) => {
          if (res.code == 200 && Array.isArray(res.data) && res.data.length) {
            this.appList = res.data;
            this.currentSelectApp = this.appList[this.currentAppIndex];
            this.currentProjectList = this.appList[
              this.currentAppIndex
            ].cardTypeList;
            this.currentSelectPro =
              Array.isArray(this.currentProjectList) &&
              this.currentProjectList.length
                ? this.currentProjectList[0]
                : null;
            this.currentRightList = this.currentProjectList[
              this.currentProjectIndex
            ].rightList;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    async rightsListFn() {
      this.loading = true;
      const res = await rightsList();
      if (res.code == 200) {
        res.data.forEach((item) => {
          item.rightId = item.rightId + "";
        });
        this.allRightsList = res.data;
      }
    },
  },
};
</script>

<style>
.el-popover.el-popper.el-popover-self {
  min-width: 20px !important;
}
</style>

<style lang="scss" scoped>
.wrapper {
  max-height: 500px;
  overflow: hidden;
  .title {
    font-size: 18px;
    color: #222;
    border-bottom: 1px solid $grey-2;
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: center;
    padding-left: 24px;
    .sub-title {
      margin-right: 12px;
      font-weight: 600;
    }
  }
  .text-center {
    text-align: center;
  }
  .item {
    font-size: 14px;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    color: #555;
    .text {
      padding: 8px 0 8px 24px;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
    }
    .my-icon {
      visibility: hidden;
      padding: 14px;
    }
    &:hover {
      color: $primary_color;
      .my-icon {
        visibility: visible;
      }
    }
    &.active {
      color: $primary_color;
      &::before {
        height: 13px;
        width: 4px;
        background-color: $primary_color;
        content: "";
        border-radius: 3px;
        position: absolute;
        top: 12px;
      }
    }
    &.middle-active {
      color: $primary_color;
    }
  }
  .spe-item:hover {
    background: rgba($color: $primary_color, $alpha: 0.1);
  }
  .text {
    padding-left: 16px;
  }
  .applicationList {
    width: 100%;
    display: flex;
    .scroll {
      height: 300px;
    }
    .left {
      width: 230px;
      border-right: 1px solid $grey-2;
      &-active {
        background: rgba($color: $primary_color, $alpha: 0.1);
      }
    }
    .middle {
      width: 230px;
      border-right: 1px solid $grey-2;
    }
    .right {
      flex: 1;
      &-item {
        padding: 8px 0 8px 24px;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
      }
      ::v-deep .el-checkbox-group {
        display: flex;
        flex-direction: column;
        .el-checkbox {
          margin: 12px 0;
        }
      }
    }
    .operation {
      width: 100px;
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    background: #fff;
    padding: 18px 0;
    border-top: 1px solid $grey-2;
  }
}
</style>
